<template>
    <div>
        <div class="well">
            <div class="row">
                <div class="col-md-8">
                    <form class="navbar-form navbar-left" style="margin-left: -15px;" @submit.prevent="refresh(1)">
                        <div class="form-group">
                            <input v-model="search" type="text" class="form-control" placeholder="请输入搜索关键字...">
                        </div>
                        <button type="submit" class="btn btn-primary">搜索</button>
                    </form>
                </div>
                <div class="col-md-4 text-right margin-bottom-10">
                    <btn-add></btn-add>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <table class="table table-bordered table-striped table-hover table-condensed">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>手机号</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(user, key) in users" v-bind:class="{ danger: user.is_lock == 1 }">
                                <td>{{ key + 1 }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.phone }}</td>
                                <td>{{ user.updated_at }}</td>
                                <td>
                                    <btn-edit :data="user"></btn-edit>
                                    <btn-give-role :id="user.id"></btn-give-role>
                                    <btn-give-permission :id="user.id"></btn-give-permission>
                                    <btn-destroy :id="user"></btn-destroy>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- form modal -->
                <div class="modal" v-bind:id="'modal-' + name" tabindex="-1" user="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true" data-backdrop="static" data-keyboard="false">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel">{{ method + title }}</h4>
                            </div>
                            <form user="form" @submit.prevent="submit">
                                <div class="modal-body">
                                    <!-- name -->
                                    <div class="form-group" :class="{'has-error': errors.has('name')}">
                                        <label for="name-field">用户名</label>
                                        <input v-model="user.name" v-validate data-vv-rules="required|max:50" data-vv-as="用户名"
                                               type="text" class="form-control" id="name-field" name="name" placeholder="请输入用户名">

                                        <!-- error msg -->
                                        <span v-show="errors.has('name')" class="help-block">{{ errors.first('name') }}</span>
                                    </div>

                                    <!-- password -->
                                    <div class="form-group" :class="{'has-error': errors.has('password')}">
                                        <label for="password-field">密码</label>
                                        <input v-model="user.password"
                                               type="text" class="form-control" id="password-field" name="password" v-bind:placeholder="user.id ? '留空不做修改' : '请输入密码'">

                                        <!-- error msg -->
                                        <span v-show="errors.has('password')" class="help-block">{{ errors.first('password') }}</span>
                                    </div>

                                    <!-- password_confirmation -->
                                    <div class="form-group">
                                        <label for="password_confirmation-field">确认密码</label>
                                        <input v-model="user.password_confirmation"
                                               type="text" class="form-control" id="password_confirmation-field" name="password_confirmation" v-bind:placeholder="user.id ? '留空不做修改' : '请输入确认密码'">
                                    </div>

                                    <!-- email -->
                                    <div class="form-group" :class="{'has-error': errors.has('email')}">
                                        <label for="sort-field">邮箱</label>
                                        <input v-model="user.email" v-validate data-vv-rules="required|email" data-vv-as="邮箱"
                                               type="text" class="form-control" id="sort-field" name="email" placeholder="请输入邮箱">

                                        <!-- error msg -->
                                        <span v-show="errors.has('email')" class="help-block">{{ errors.first('email') }}</span>
                                    </div>

                                    <!-- phone -->
                                    <div class="form-group" :class="{'has-error': errors.has('phone')}">
                                        <label for="phone-field">手机号</label>
                                        <input v-model="user.phone" v-validate data-vv-rules="required" data-vv-as="手机号"
                                               type="text" class="form-control" id="phone-field" name="phone" placeholder="请输入手机号">

                                        <!-- error msg -->
                                        <span v-show="errors.has('phone')" class="help-block">{{ errors.first('phone') }}</span>
                                    </div>

                                    <!-- is_lock -->
                                    <div class="form-group">
                                        <label>锁定</label>
                                        <div class="radio">
                                            <label class="no-padding">
                                                <input v-model="user.is_lock" name="is_lock" value="1" type="radio" class="colored-danger">
                                                <span class="text">是 </span>
                                            </label>
                                            <label>
                                                <input v-model="user.is_lock" name="is_lock" value="0" type="radio">
                                                <span class="text">否 </span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->


                <!-- 分配角色 -->
                <give-role ref="giveRole" :name="name" :title="title"></give-role>

                <!-- 分配权限 -->
                <give-permission ref="givePermission" :name="name" :title="title"></give-permission>
            </div>
        </div>

        <!-- 分页导航 -->
        <pagination style="margin-top: -10px;" :paginator="paginator"></pagination>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.refresh();

            // form modal隐藏事件
            this.modal.on('hidden.bs.modal', response => {
                this.errors.clear();
            });
        },
        data(){
            return {
                index: 0,
                name: this.$route.name,
                title: '管理员',
                user: {},
                users: [],
                paginator: {},
                page: 1,
                search: '',
            }
        },
        methods: {
            /**
             * 添加
             */
            add(){
                this.user = {
                    name: '',
                    password: '',
                    password_confirmation: '',
                    email: '',
                    phone: '',
                    is_lock: 0,
                };
                this.showForm();
            },

            /**
             * 编辑
             *
             * @param object user
             */
            edit(user){
                this.setIndex(user);
                this.get(this.name + '/' + user.id + '/edit').then(response => {
                    this.user = response;
                    this.showForm();
                });
            },

            /**
             * 删除
             *
             * @param integer id 主键ID
             */
            destroy(user){
                this.setIndex(user);
                this.confirm(() =>{
                    this.delete(this.name + '/' + user.id).then(response => {
                        this.refresh();
                        this.alert(this.title + '删除成功！');
                    });
                });
            },

            /**
             * 提交表单
             */
            submit(){
                this.$validator.validateAll().then(result => {
                    if(result){
                        let config = {
                            url: this.name + (this.user.id ? '/' + this.user.id : ''),
                            type: this.user.id ? 'PATCH' : 'POST',
                            data: this.user,
                        };

                        this.ajax(config).then(response => {
                            this.alert(this.title + this.method + '成功！');
                            this.modal.modal('hide');
                            this.refresh();
                        });
                    }
                });
            },

            /**
             * 更新数据
             */
            refresh(page = false){
                if (page){
                    this.page = page;
                }

                this.get(this.name, { page: this.page, search: this.search }).then(response => {
                    this.users = response.data;
                    this.paginator = response;
                });
            },

            /**
             * 显示表单模态框
             */
            showForm(){
                this.modal.modal('show');
            },

            /**
             * 设置当前操作元素索引
             */
            setIndex(user){
                this.index = this.users.indexOf(user);
            }
        },
        computed: {
            /**
             * 表单模态框
             *
             * @returns {*|jQuery|HTMLElement}
             */
            modal: function(){
                return $("#modal-" + this.name);
            },

            /**
             * 操作类型
             * @returns {string}
             */
            method: function(){
                return this.user.id ? '编辑' : '创建';
            },
        },
    }
</script>
